<template>
  <navbar>
    <a class="navbar-brand" href="http://www.baidu.com" target="blank"></a>

    <!-- <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="leftSidebarToggle">&#9776;</button> -->

    <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item">
        <a class="nav-link navbar-toggler sidebar-toggler" @click="sidebarMinimize">&#9776;</a>
      </li>
    </ul>

    <!-- <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item header-item">
        <router-link tag="div" to='/' style="height:55px;" class="nav-link">
          <p>
            <Icon type="compose" size='30' color="#2d8cf0"></Icon>
          </p>
          <p style="color:white"> 留言管理 </p>
        </router-link>
      </li>
      <li class="nav-item header-item">
        <router-link tag="div" to='/home1' style="height:55px;" class="nav-link">
          <p>
            <Icon type="stats-bars" size='30' color="#2d8cf0"></Icon>
          </p>
          <p style="color:white"> 浏览排行 </p>
        </router-link>

      </li>
      <li class="nav-item header-item">
        <Dropdown>
          <router-link tag="div" to='/' style="height:55px;" class="nav-link">
            <p>
              <Icon type="android-cloud" size='30' color="#2d8cf0"></Icon>
            </p>
            <p style="color:white"> 云服务器 </p>
          </router-link>
          <DropdownMenu slot="list">
            <DropdownItem>Linux</DropdownItem>
            <DropdownItem>Mac OS X</DropdownItem>
            <DropdownItem>Windows</DropdownItem>
            <DropdownItem>Core OS</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </li>
      <li class="nav-item header-item">
        <router-link tag="div" to='/home1' style="height:55px;" class="nav-link">
          <p>
            <Icon type="trophy" size='30' color="#2d8cf0"></Icon>
          </p>
          <p style="color:white"> 销量排行 </p>
        </router-link>
      </li>
    </ul> -->

    <ul class="nav navbar-nav ml-auto">
      <!-- <li class="nav-item d-md-down-none">
        <a class="nav-link">
          <Icon type="android-notifications" size="20"></Icon>
          <span class="badge badge-pill badge-danger">5</span>
        </a>
      </li> -->

      <Dropdown class="nav-item">
        <a href="javascript:void(0)">
          <span slot="button">
            <img src="static/img/avatars/luffy.jpg" width="50px" height="50px" class="img-avatar" alt="o" @click="Logout">
            <!-- <span class="d-md-down-none">admin</span> -->
          </span>
        </a>
        <!-- <Dropdown-menu slot="list">
          <Dropdown-item>
            <p class="dropdown-itemp">
              <Icon type="alert"></Icon>Updates
              <span class="badge badge-info">42</span>
            </p>

          </Dropdown-item>
          <Dropdown-item>
            <p class="dropdown-itemp">
              <Icon type="chatbox-working"></Icon>Messages
              <span class="badge badge-success">42</span>
            </p>

          </Dropdown-item>
          <Dropdown-item>
            <p class="dropdown-itemp">
              <Icon type="chatbox-working"></Icon>Messages
              <span class="badge badge-danger">42</span>
            </p>

          </Dropdown-item>
          <Dropdown-item divided>
            <p class="dropdown-itemp">
              <Icon type="android-contact"></Icon> Profile</p>

          </Dropdown-item>
          <Dropdown-item>
            <p class="dropdown-itemp">
              <Icon type="android-settings"></Icon> Settings</p>
          </Dropdown-item>

          <Dropdown-item>
            <a href="" @click="Logout">
              <p class="dropdown-itemp">
                <Icon type="power"></Icon>Logout</p>
            </a>
          </Dropdown-item>

        </Dropdown-menu> -->
      </Dropdown>
      <!-- <li class="nav-item d-md-down-none">
        <a class="nav-link navbar-toggler aside-menu-toggler" @click="asideToggle">&#9776;</a>
      </li> -->
    </ul>
  </navbar>
</template>

<script>
import navbar from './Navbar'
export default {
  name: 'header',
  components: {
    navbar
  },
  methods: {
    Logout(e) {
      e.preventDefault();
      this.$store.dispatch('LogOut').then(() => {
        this.$router.push({ path: '/login' });
      }).catch(err => {
        this.$message.error(err);
      });
    },
    // 左侧菜单
    sidebarMinimize(e) {
      e.preventDefault()
      document.body.classList.toggle('sidebar-minimized')
    },
    // 右侧菜单
    asideToggle(e) {
      e.preventDefault()
      document.body.classList.toggle('aside-menu-hidden')
    },
    // leftSidebarToggle(e) {
    //   e.preventDefault()
    //   document.body.classList.toggle('sidebar-mobile-show')
    // },
    // sidebarToggle(e) {
    //   e.preventDefault()
    //   document.body.classList.toggle('sidebar-hidden')
    // }
  }
}
</script>

<style type="text/css" scoped>
/* .dropdown-itemp {
  text-align: left;
  font-size: 15px;
  padding: 10px;
}
.header-item .ivu-dropdown-item {
  padding: 15px;
}
.header-item {
  width: 130px;
  background-color: #20a8d8;
  background-color: white;
  height: 55px;
}
.header-item a {
  color: white !important;
} */
</style>
